<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import myAxios from '../../../plugins/myAxios'
import { ElMessageBox } from 'element-plus'

// 搜索条件
const searchForm = ref({
  studentId: '',
  dateRange: [],
  searchForm: null  // 添加状态筛选
})

// 分页参数
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0
})

// 状态选项
const statusOptions = [
  { label: '全部', value: null },
  { label: '待审核', value: 0 },
  { label: '通过', value: 1 },
  { label: '驳回', value: 2 }
]

// 表格数据
const tableData = ref([])
// 加载状态
const loading = ref(false)

// 表格列配置
const columns = [
  { prop: 'exemptionId', label: '申请ID', width: '100' },
  { prop: 'studentNumber', label: '学号', width: '120' },
  { prop: 'reasonContent', label: '申请原因', minWidth: '200' },
  { 
    prop: 'applyStatus', 
    label: '状态', 
    width: '100',
    formatter: (row) => getStatusText(row.applyStatus)
  },
  { prop: 'applyTime', label: '申请时间', width: '140' },
  { prop: 'reviewTime', label: '审核时间', width: '140' },
  { prop: 'reviewBy', label: '审核人', width: '120' },
  { prop: 'reviewComment', label: '审核意见', width: '250' }
]

// 搜索方法
const handleSearch = () => {
  pagination.value.current = 1  // 搜索时重置页码
  getList()
}

// 重置搜索
const handleReset = () => {
  searchForm.value = {
    studentId: '',
    dateRange: [],
    applyStatus: null
  }
  pagination.value.current = 1
  getList()
}

// 获取列表数据
const getList = async () => {
  loading.value = true
  try {
    const params = {
      studentNumber: searchForm.value.studentNumber,
      startTime: searchForm.value.dateRange?.[0] || null,
      endTime: searchForm.value.dateRange?.[1] || null,
      applyStatus: searchForm.value.applyStatus,
      current: pagination.value.current,
      pageSize: pagination.value.pageSize
    }
    const res = await myAxios.get('/admin/exemption/page', { params })
    tableData.value = res.records
    pagination.value.total = res.total
  } catch (error) {
    ElMessage.error('获取数据失败：' + error)
  } finally {
    loading.value = false
  }
}

// 页码改变
const handleCurrentChange = (current) => {
  pagination.value.current = current
  getList()
}

// 每页条数改变
const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  pagination.value.current = 1
  getList()
}

// 审核操作
const handleReview = async (row, status) => {
  try {
    await ElMessageBox.confirm(
      status === 1 ? '确认通过该申请?' : '确认驳回该申请?'
    )
    
    await myAxios.post('/admin/exemption/review', {
      exemptionId: row.exemptionId,
      applyStatus:status,
      reviewComment: row.reviewComment
    })
    
    ElMessage.success('操作成功')
    getList()
  } catch (error) {
    if (error === 'cancel') return
    ElMessage.error('操作失败：' + error)
  }
}

// 获取状态标签类型
const getStatusType = (status) => {
  const types = {
    0: 'info',    // 待审核使用灰色
    1: 'success', // 通过使用绿色
    2: 'danger'   // 驳回使用红色
  }
  return types[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    0: '待审核',
    1: '通过',
    2: '驳回'
  }
  return texts[status] || '未知状态'
}

onMounted(() => {
  getList()
})
</script>

<template>
  <div class="exemption-audit">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="学号">
          <el-input
            v-model="searchForm.studentNumber"
            placeholder="请输入学号"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 350px"
          />
        </el-form-item>
        <el-form-item label="申请状态">
          <el-select
            v-model="searchForm.applyStatus"
            placeholder="请选择状态"
            clearable
            style="width: 120px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          v-for="col in columns"
          :key="col.prop"
          v-bind="col">
          <template #status="{ row }">
            <el-tag :type="getStatusType(row.applyStatus)">
              {{ getStatusText(row.applyStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <template v-if="row.applyStatus === 0">
              <el-button
                type="primary"
                size="small"
                @click="handleReview(row, 1)">
                通过
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleReview(row, 2)">
                驳回
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.exemption-audit {
  padding: 20px;
}
.search-card {
  margin-bottom: 20px;
}
.table-card {
  margin-bottom: 20px;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>